<template>
	<div class="submit">
		<!-- 面包屑预留位置 -->
		<el-card style="width: 85%;">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="标题">
					<el-input placeholder="请输入文章标题" v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="背景图片">
					<el-upload
						v-model="form.imageUrl"
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="文章内容">
					<!-- 段落管理 -->
					<el-table border :data="this.form.wordArray" style="width: 100%;">
						<el-table-column 
						prop="paragraph" 
						class="paragraph" 
						label="段落文字"
						width="500">	
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<!-- 修改按钮 -->
								<el-button  type="primary" @click="showParagraphDialog(scope.$index)" icon="el-icon-edit" circle></el-button>
								<!-- 删除按钮 -->
								
								  <el-button type="danger" @click="deleteParagraph(scope.$index)" icon="el-icon-delete" circle></el-button>
								
								
							</template>
							
						</el-table-column>
					</el-table>
					
					<el-button @click = "wordOpen()" type="mini">添加段落+</el-button>
				</el-form-item>
				<!-- 提交文章对象 -->
				<el-form-item>
				    <el-button type="primary" @click="onSubmit">立即生成</el-button>
				    <el-button>取消</el-button>
				  </el-form-item>
				</el-form>
			</el-form>
			
		</el-card>
		
		<el-dialog
			:title="testWord"
			:visible.sync="wordShow"
		>
			<common-form
				:formLabel="wordFormLabel"
				:form="wordForm"
				:inline="false"
				:ref="wordForm"
				@onConfirm="onConfirm"
				@onClose = "onClose"
			>
				<el-form-item label="段落" class="experience">
				    <el-input  type="textarea" v-model="wordForm.paragraph"></el-input>
				</el-form-item>
			</common-form>
		</el-dialog>
	</div>
</template>

<script>
	import CommonForm from '../../src/components/CommonForm.vue'
	export default{
		components:{
			CommonForm
		},
		data(){
			return{
				form:{
					title:'',
					imageUrl:'',
					wordArray:[]
				},
				wordFormLabel:[],
				wordShow : false,
				wordIndex : -1,
				wordForm:{
					paragraph:''
				}
			}
		},
		methods: {
			//上传背景图片
		      handleAvatarSuccess(res, file) {
		        this.imageUrl = URL.createObjectURL(file.raw);
		      },
		      beforeAvatarUpload(file) {
		        const isJPG = file.type === 'image/jpeg';
		        const isLt2M = file.size / 1024 / 1024 < 2;
		
		        if (!isJPG) {
		          this.$message.error('上传头像图片只能是 JPG 格式!');
		        }
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过 2MB!');
		        }
		        return isJPG && isLt2M;
		      },
			  // 添加段落
			  wordOpen(){
				  this.wordShow = true
			  },
			  onConfirm(obj){
				  // console.log(this.form.wordArray)
				  if(this.wordIndex<0){
					 this.form.wordArray.push(obj)
					 this.wordShow = false 
					 this.resetWord()
				  }else{
					 let wordIndex = this.wordIndex
					  this.form.wordArray[wordIndex].paragraph = obj.paragraph
					  this.wordShow = false 
					  this.wordIndex = -1
					  this.resetWord()
				  }
				  
			  },
			  onClose(){
				  this.wordShow = false
				  this.resetWord()
				  this.wordIndex = -1
			  },
			  showParagraphDialog(wordIndex){
				  this.wordIndex = wordIndex
				  let words = this.form.wordArray[wordIndex]
				  this.wordShow = true
				  this.wordForm.paragraph = words.paragraph
			  },
			  // 删除对应该栏的段落
			  deleteParagraph(wordIndex){
				  // this.wordIndex = wordIndex
				  this.$confirm("此操作将永久删除该段落，是否继续？","提示",{
				  	confirmButtonText:"确认",
				  	cancelButtonText:"取消",
				  	type:"warning"
				  }).then(()=>{
					  this.form.wordArray.splice(wordIndex,1)
				  })
				  
				  
			  },
			  // 重置添加段落
			  resetWord(){
				 this.wordForm = {
					 paragraph : ''
				 }
			  },
			  // 提交文章
			  onSubmit(){
				  console.log(this.form)
			  }
		    },
			computed:{
				testWord(){
					if(this.wordIndex < 0){
						return '新增段落'
					}else{
						return '修改段落内容'
					}
				}
				
			}
	}
</script>

<style lang="less" scoped>
	.submit{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/deep/.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	/deep/.avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	  
</style>
